<template>
  <div class="box">
    <div class="order">
      <span class="box-item">我的订单</span>
      <div style="display: flex; flex-direction: column; justify-content: center;align-items: center;">
        <el-collapse accordion>
          <el-collapse-item :name="index" v-for="(item, index) in orderList.list" :key="item">
            <template #title>
              <div class="title">
                <div> 下单日期：{{ item.orderNo }}</div>
                <div> 订单总金额：{{ item.totalAmount }}</div>
                <div> 订单商品数量： {{ item.totalCount }}</div>
                <div> 电话：{{ JSON.parse(item.address).tel }}</div>
                <div> 地址：{{ JSON.parse(item.address).detail }}</div>
                <div>订单状态：{{ item.status }} </div>
              </div>
            </template>
            <div style="margin-left: 50px;">
              订单信息：
              <el-row v-for="(i, index) in item.item" :gutter="20" style="margin: auto;">
                <el-col :span="1">（{{ index + 1 }}）</el-col>
                <el-col :span="8">名字：{{ i.snapTitle }}</el-col>
                <el-col :span="3">数量：{{ i.count }}</el-col>
                <el-col :span="3">单价：{{ i.snapPrice }}</el-col>
              </el-row>

            </div>
          </el-collapse-item>
        </el-collapse>

        <el-pagination v-model:current-page="currentPage" :page-size="8" layout="total, prev, pager, next"
          :total="orderList.total" @change="getOrderData()" />

      </div>
    </div>
    <div class="address">
      <span class="box-item">我的地址</span>
      <div>
        <el-table :data="address" border stripe>
          <el-table-column prop="name" label="名字" width="180" />
          <el-table-column prop="tel" label="电话" width="180" />
          <el-table-column prop="area" label="地址" width="180" />
          <el-table-column prop="detail" label="详细地址" width="260" />
          <el-table-column label="操作" width="120">
            <template #default="scope">
              <el-button link type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
              <el-popconfirm title="确定要删除此地址吗?" @confirm="handleDelete(scope.row, scope.$index)">
                <template #reference>
                  <el-button link type="primary" size="small">删除</el-button>
                </template>
              </el-popconfirm>

            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-button style="margin: 20px;" size="large" type="primary" @click="addNew()">新增地址</el-button>
    </div>
    <el-dialog v-model="dialogTableVisible" title="地址信息" width="800">
      名字 :<el-input v-model="nowData.name" placeholder="请输入姓名" />
      电话 :<el-input v-model="nowData.tel" placeholder="请输入电话" />
      地址 :<el-input v-model="nowData.area" placeholder="请输入地址" />
      详细地址 :<el-input v-model="nowData.detail" placeholder="请输入详细地址" />
      是否默认 : <el-switch v-model="nowData.isDefault" />
      <div style="display: flex; justify-content: center;"><el-button type="primary" @click="submit()">完成</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, h } from "vue";
import { getAddressApi, getOrderListApi } from "@/apis/order";
import { editAddressApi, delAddressApi, addAddressApi } from "@/apis/user";

const address = ref([]);

const orderList = ref([])
const currentPage = ref(1)

const dialogTableVisible = ref(false);

const nowData = ref(null);

const isAdd = ref(false);

const getAddressData = async () => {
  const addressData = await getAddressApi();
  address.value = addressData.data.data;
};

const getOrderData = async () => {
  const res = await getOrderListApi({
    start: currentPage.value,
    count: '8'
  });
  orderList.value = res.data.data;
  console.log(res);
};

const handleDelete = async (item, index) => {
  const res = await delAddressApi(item.id);
  if (res.data.code == 0) {
    //删除成功
    ElNotification({
      title: '通知',
      message: h('i', { style: 'color: teal' }, '操作成功'),
    })
  }
  address.value.splice(index, 1)
  // location.reload();
};

const handleEdit = async (item) => {
  nowData.value = item;
  dialogTableVisible.value = true;
  isAdd.value = false
};

const submit = async () => {
  let res;
  if (isAdd.value) {
    res = await addAddressApi(nowData.value);
    address.value.push(nowData.value);
  } else {
    res = await editAddressApi(nowData.value);
  }

  if (res.data.code == 0) {
    ElNotification({
      title: '通知',
      message: h('i', { style: 'color: teal' }, '操作成功'),
    })
  }

  dialogTableVisible.value = false;


};

const addNew = async () => {
  nowData.value = {
    name: "",
    tel: "",
    area: "",
    detail: "",
    isDefault: false
  };
  dialogTableVisible.value = true;
  isAdd.value = true

};


onMounted(() => {
  getAddressData();
  getOrderData()
});
</script>

<style lang="scss" scoped>
.box {
  background-color: rgb(255, 255, 255);


  .box-item {
    width: 200px;
    padding: 5px;
    background-color: aquamarine;
    border-radius: 10px;
    box-shadow: 0 0 10px rgb(115, 202, 239);
    font-size: 30px;
    margin: 10px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;

  }

  .order {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .title {
      font-size: 15px;
      margin: 0;
      font-weight: 300;
      line-height: 20px;
      display: flex;

      >div {
        font-weight: 600;
        width: 150px;
        margin-right: 18px;

      }
    }
  }

  .address {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

  }
}
</style>
